document.addEventListener('DOMContentLoaded', function () {
    const taskInput = document.getElementById('new-task');
    const addTaskButton = document.getElementById('add-task');
    const todoList = document.getElementById('todo-list');

    function addTask() {
        const taskText = taskInput.value.trim();

        if (taskText === '') {
            alert('请输入任务内容！');
            return;
        }

        const taskItem = document.createElement('li');
        const taskTextSpan = document.createElement('span');
        taskTextSpan.textContent = taskText;
        taskItem.appendChild(taskTextSpan);

        const buttonContainer = document.createElement('div');
        buttonContainer.classList.add('button-container');

        const completeButton = document.createElement('button');
        completeButton.textContent = '完成';
        completeButton.classList.add('todo-complete');
        completeButton.addEventListener('click', function () {
            taskItem.classList.add('completed');
            taskTextSpan.textContent = `${taskText}（已完成）`;
            taskItem.removeChild(buttonContainer);
        });

        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.classList.add('todo-delete');
        deleteButton.addEventListener('click', function () {
            todoList.removeChild(taskItem);
        });

        buttonContainer.appendChild(completeButton);
        buttonContainer.appendChild(deleteButton);
        taskItem.appendChild(buttonContainer);
        todoList.appendChild(taskItem);

        taskInput.value = '';
    }

    addTaskButton.addEventListener('click', addTask);
    taskInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            addTask();
        }
    });
});
